<template>
  <div>
    <!-- <h1>人气推荐详情{{ id }}</h1> -->
    <div v-html="content" class="content"></div>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { getGoodDetail } from "@/utils/http/home";
import { reactive, toRefs } from "vue";
export default {
  setup(props) {
    const route = useRoute();
    //相当于是之前的this.$route.
    // const id = route.query.id;
    const id = route.params.id;
    //动态传参用params接收

    const data = reactive({
      basicInfo: "",
      //保存商品基本信息
      bannerList: [],
      //轮播图
      content: "",
      // 图文介绍
    });

    getGoodDetail({ id }).then((res) => {
      console.log(res);
      data.basicInfo = res.data.basicInfo;
      data.bannerList = res.data.pics;
      data.content = res.data.content;
    });

    return { id, ...toRefs(data) };
  },
};
</script>
<style lang="scss">
// 这里不能加scoped
// 如果要加的话 需要用到样式穿透 deep 去解决？
.content {
  img {
    width: 100% !important;
    height: 100px !important;
  }
}
</style>
